<div class="uploads">
	<div class="container">
		<div class="row">
			<div class="input-field col s3">
				<form action="">
					<h1>UPLOAD</h1>
				</form>
			</div>
			<div class="input-field col s9">
				<ul materialize="collapsible" data-collapsible="accordion">
					<li>
						<div class="collapsible-header">Upload help</div>
						<div class="collapsible-body">
							<blockquote>
								If supplying a casename, the only accepted special characters are '-' or '_'.<br><br>

								<b class="upload-header">Sequential Uploading:</b><br>
								Choose your files to upload and bulk into one job. <br><br>

								<b class="upload-header">Concurrent Uploading:</b> <br>
								The task runner is now multi daemonized, meaning as many workers as there are free 
								in the job consumer, the more concurrency you can use. 
							</blockquote>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="row">
			<form class="col s12" [formGroup]="uploadForm" novalidate (ngSubmit)="save(uploadForm.value, uploadForm.valid, $event)" materialize>
				<div class="row">
					<div class="input-field col s12">
						<div class="file-field input-field">
							<div class="btn">
								<span>File</span>
								<input type="file" (change)="onChange($event)" name="files" enctype="multipart/form-data" multiple>
							</div>

							<div class="file-path-wrapper">
								<input class="file-path validate" type="text" placeholder="Upload one or more files">
							</div>
							<small [hidden]="uploadForm.controls.files.valid || (uploadForm.controls.files.pristine && !submitted)">
								<u>** Files are required to initiate uploads..</u>
							</small>
						</div>

					</div>
				</div>
				<div class="row">
					<div class="input-field col s6">
						<span class="flow-text">Choose case name..</span>
					</div>
					<div class="input-field col s6">
						<input type="text" class="validate" formControlName="case_name" name="case_name">
						<label class="active" name="case_id">Case #ID</label>
					</div>

				</div>
				<div class="row">
					<div class="input-field col s12">
						<button class="btn waves-effect waves-orange" type="submit" [disabled]="!uploadForm.valid||!uploadForm.dirty">Upload
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<div class="delete">
	<div class="container heightcontainer">
		<div class="row">
			<div class="input-field col s3">
				<form action="">
					<h1>DELETE</h1>
				</form>
			</div>
			<div class="input-field col s9">
				<ul materialize="collapsible" data-collapsible="accordion">
					<li>
						<div class="collapsible-header">Delete help</div>
						<div class="collapsible-body">
							<blockquote>
								The delete API works on single request and joined requests. <br>

								If you need to delete a whole case select that case and leave the endpoint selector empty. <br>

								If you need to delete an endpoint only (will delete all aspects in any case it resides in) select that endpoint and leave the case selector empty. <br>

								If you need to delete a specific endpoint from a specific case, select them both and hit delete single.
							</blockquote>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="row">
			<form class="col s12" [formGroup]="deleteCaseForm" novalidate (ngSubmit)="deleteCase(deleteCaseForm.value, deleteCaseForm.valid, $event)" materialize>
				<div class="input-field col s4">
					<span class="flow-text">Delete Cases(s):</span>
				</div>
				<div class="input-field col s4">
					<div materialize action="#">
						<select materialize="material_select" [materializeSelectOptions]="selectedCases" formControlName="case_name" (change)="setCase($event.target.value, 'case')">
							<option value="" selected>Choose case(s)</option>
							<option *ngFor="let option of selectedCases" [value]="option.case_name">{{option.case_name}}</option>
						</select>
					</div>
				</div>
				<div class="input-field col s4 right-align">
					<button class="btn waves-effect waves-orange" type="submit" name="action" [disabled]="deleteObject.delete_case && deleteObject.delete_endpoint || !deleteCaseForm.valid">Submit
					</button>
				</div>
			</form>
		</div>
		<div class="row">
			<form class="col s12" [formGroup]="deleteEndpointForm" novalidate (ngSubmit)="deleteEndpoint(deleteEndpointForm.value, deleteEndpointForm.valid, $event)" materialize>
				<div class="input-field col s4">
					<span class="flow-text">Delete Endpoint(s):</span>
				</div>
				<div class="input-field col s4">
					<select materialize="material_select" [materializeSelectOptions]="selectedEndpoints" formControlName="endpoint" (change)="setCase($event.target.value, 'endpoint')">>
						<option value="" selected>Choose endpoint(s)</option>
						<option *ngFor="let option of selectedEndpoints" [value]="option.endpoint_name">{{option.endpoint_name}}</option>
					</select>
				</div>
				<div class="input-field col s4 right-align">
					<button class="btn waves-effect waves-orange" type="submit" name="action" [disabled]="deleteObject.delete_case && deleteObject.delete_endpoint || !deleteEndpointForm.valid">Submit
					</button>
				</div>
			</form>
		</div>
		<div class="row" *ngIf="deleteObject.delete_case && deleteObject.delete_endpoint">
			<form class="col s12">
			<div class="input-field col s4">
			<span class="flow-text">Delete Endpoint from Case?</span>
			</div>
			<div class="col s4"></div>
			<div class="input-field col s4 right-align">
				<button class="btn waves-effect waves-orange" (click)="deleteEndpointFromCase()" type="submit" name="action">Submit
				</button>
			</div>	
			</form>			
		</div>
	</div>
</div>
<div id="modal1" materialize="modal" [materializeParams]="[{dismissible: true}]" [materializeActions]="modalActions" class="modal bottom-sheet">
	<div class="modal-content" *ngIf="uploadResponse">
		<h4>{{uploadResponse.reason}}</h4>
		<p>HTTP Response: {{uploadResponse.response}}</p>
	</div>
	<div class="modal-content" *ngIf="deleteResponse">
		<h4>Deleting... this may take a while.</h4>
		<p>HTTP Response: {{deleteResponse | json }}</p>
	</div>
</div>
